import React,{useState,useEffect} from 'react';
import { Editor } from 'react-draft-wysiwyg'
import { convertToRaw, EditorState,ContentState } from 'draft-js';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import draftToHtml from 'draftjs-to-html'
import htmlToDraft from 'html-to-draftjs'

const Newseditor = (props) => {
  useEffect(() => {
  //  html转正常
     const contentBlock = htmlToDraft(props.TextEditor);
    if (contentBlock) {
      const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
      const editorState = EditorState.createWithContent(contentState);
      seteditorState(editorState)
    }
  }, [props.TextEditor])
  const [editorState, seteditorState] = useState('')
  return (
    <div>
      <Editor
        editorState={editorState}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        onEditorStateChange={(editorState) => {
          seteditorState(editorState)
          props.onChangeEditor(draftToHtml(convertToRaw(editorState.getCurrentContent())))
        }}
      />
    </div>
  );
}

export default Newseditor;
